<template>
	<view>
		<view class="bg margin-lr padding-lr margin-top-sm padding-tb-sm flex align-center justify-between radius"
			v-for="(item,index) in list" :key="index">
			<view class="">
				<view class="text-lg text-bold ">{{item.serviceTime}}</view>
				<view style="color: #999999;font-size: 26upx;margin-top: 5upx;">预约人数:{{item.num}}人</view>
			</view>
			<view class="flex align-center">
				<view class="btn" @click.stop="dete(item.serviceTimeId)">删除</view>
				<view class="btn1" @click.stop="bianji(item.serviceTimeId)">编辑</view>
			</view>
		</view>

		<view class="btns flex justify-center">
		   <view class="butt flex justify-center align-center" @click="addData">添加时间</view>
		  </view>
		
		<empty v-if="list.length == 0" ></empty>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				page: 1,
				limit: 10,
				list: [],
				count: 0
			}
		},
		onLoad() {

		},
		onShow() {
			this.getlist()
		},
		methods: {
			addData() {
				uni.navigateTo({
					url: '/my/data/EndData'
				})
			},
			bianji(serviceTimeId){
				uni.navigateTo({
					url: '/my/data/EndData?serviceTimeId='+serviceTimeId
				})
			},
			getlist() {
				let userId = uni.getStorageSync('userId');
				let data = {
					page: this.page,
					limit: this.limit,
					userId: userId
				}
				this.$Request.getT('/app/serviceTime/selectServiceTime', data).then(res => {
					if (res.code == 0) {
						if (this.page == 1) {
							this.list = res.data.records
						} else {
							this.list = [...this.list, ...res.data.records]
						}
						this.count  = res.data.total
					}
				})
			},
			dete(serviceTimeId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除当前时间段？',
					success: function(res) {
						if (res.confirm) {
							let data = {
								serviceTimeId: serviceTimeId
							}
							that.$Request.getT('/app/serviceTime/deleteServiceTime', data).then(res => {
								if (res.code == 0) {
									that.$queue.showToast('删除成功');
									that.page = 1
									that.getlist()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						}
					},
				})
			}
		},
		onReachBottom: function() {
			if (this.count == this.list.length) {
				uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				})
				return
			} else {
				this.page = this.page + 1;
				this.getlist()
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		},
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.bg {
		background: #fff;
	}

	.btn {
		width: 120upx;
		height: 50upx;
		border: 2upx solid #F1F1F7;
		border-radius: 25upx;
		color: #CCCCCC;
		text-align: center;
		line-height: 50upx;
		margin-right: 10upx;
	}

	.btn1 {
		width: 120upx;
		height: 50upx;
		background: #557EFD;
		border-radius: 25upx;
		color: #fff;
		text-align: center;
		line-height: 50upx;
	}
	
	.btns{
	  width: 100%;
	  height: 160rpx;
	  position: fixed;
	  bottom: 0upx;
	  left: 0;
	  right: 0;
	  background-color: #F5F5F5;
	  z-index: 99;
	 }
	 .butt {
	  background: #557EFD;
	  color: #fff;
	  border-radius: 24upx;
	  width: 686rpx;
	  height: 80rpx;
	  margin-top: 20rpx;
	  
	 }
</style>
